<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes">Accept
        <input type="checkbox" id="accept2" name="accept" value="yes" checked>Accept2
    </label>
    <br>
    <button id="btn">sumbit</button>
    <br>
    <p>Select your favorite colors:</p>
    <label for="c1"> <input type="checkbox" name="color" value="red" id="c1">Red</label>
    <label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
    <label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>
    <p>
        <button id="btn2">Get Selected Colors</button>
    </p>
    <button id="btn3">check all</button>
    <button id="btn4">uncheck all</button>
    <button id="btn5">reserve all</button>
    <div id="createCheckboxed"></div>
    <div id="createCheckboxed2"></div>

    <script>
        const checked = document.querySelector('#accept:checked') !== null;
        console.log(checked) // true or false
        document.querySelector('#btn').addEventListener('click', function () {
            const checked = document.querySelector('#accept') !== null;
            alert(checked) // true or false
        });

        document.querySelector('#btn2').addEventListener('click', function () {
            let checkboxes = document.querySelectorAll('input[name="color"]:checked');
            let values = [];
            checkboxes.forEach((checkbox) => {
                values.push(checkbox.value);
            });
            alert(values.join(','));//red,green,blue
        });

        document.querySelector('#btn3').addEventListener('click', function () {
            let checkboxes = document.querySelectorAll('input[name="color"]');
            checkboxes.forEach((checkbox) => {
                checkbox.checked = true;
            });
        });
        document.querySelector('#btn4').addEventListener('click', function () {
            let checkboxes = document.querySelectorAll('input[name="color"]');
            checkboxes.forEach((checkbox) => {
                checkbox.checked = false;
            });
        });
        document.querySelector('#btn5').addEventListener('click', function () {
            let checkboxes = document.querySelectorAll('input[name="color"]');
            checkboxes.forEach((checkbox) => {
                checkbox.checked = !checkbox.checked;
            });
        });

        (function () {
            const colors = ['red', 'green', 'blue'];
            colors.forEach(function (color) {
                const id = `cb-${color}`;
                const label = document.createElement('label');
                label.setAttribute('for', id);

                const checkbox = document.createElement('input');
                checkbox.setAttribute('type', 'checkbox');
                checkbox.setAttribute('name', 'color');
                checkbox.setAttribute('value', color);
                checkbox.setAttribute('id', id);

                label.appendChild(checkbox);
                label.appendChild(document.createTextNode(color));
                let createCheckboxed = document.querySelector('#createCheckboxed');
                createCheckboxed.appendChild(label);
                createCheckboxed.setAttribute('style', 'display:block;margin-top:10px');
            });


            const colors2 = ['red', 'green', 'blue'];
            const html = colors2.map(color => `<label for="cb-${color}"><input type="checkbox" name="color" value="${color}" id="cb-${color}"> ${color}</label>`).join(' ')
            document.querySelector('#createCheckboxed2').innerHTML = html;
        })();


    </script>
</body>

</html>